<template>
  <div class="real-container">
    <div class="header">
      <van-nav-bar
        class="title"
        title="创建工单"
        style="width: 100%; height: 44px"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>

    <div class="form-list">
      <van-form>
        <van-cell-group inset>
          <van-field
            v-model="state.fromData.riskPoint"
            is-link
            readonly
            name="riskPointId"
            label="选择风险点位"
            placeholder="请选择选择风险点位"
            @click="state.showPicker3 = true"
            v-if="state.type == '区域响应'"
          />
          <van-popup
            v-model:show="state.showPicker3"
            destroy-on-close
            position="bottom"
            v-if="state.type == '区域响应'"
          >
            <van-picker
              :columns="state.riskPointColumns"
              @confirm="onConfirmRiskPoint"
              @cancel="state.showPicker3 = false"
            />
          </van-popup>
          <van-field
            v-model="state.fromData.workTypeName"
            is-link
            readonly
            name="workType"
            label="工单类型"
            placeholder="请选择工单类型"
            @click="state.showPicker1 = true"
          />
          <van-popup v-model:show="state.showPicker1" destroy-on-close position="bottom">
            <van-picker
              :columns="workTypeColumns"
              @confirm="onConfirmWorkType"
              @cancel="state.showPicker1 = false"
            />
          </van-popup>
          <van-field
            v-model="state.fromData.teamLeader"
            name="teamLeaderId"
            label="选择班组长"
            placeholder="请选择班组长"
            is-link
            readonly
            @click="state.showPicker2 = true"
          />
          <van-popup v-model:show="state.showPicker2" destroy-on-close position="bottom">
            <van-picker
              :columns="state.leaderColumns"
              @confirm="onConfirmLeader"
              @cancel="state.showPicker2 = false"
            />
          </van-popup>
          <van-field
            v-model="state.fromData.workOrderAddress"
            name="workOrderAddress"
            label="工单地址"
            placeholder="请输入工单地址"
          />
          <van-field
            v-model="state.fromData.workOrderDescription"
            name="workOrderDescription"
            label="工单描述"
            placeholder="请输入工单描述"
          />
        </van-cell-group>
      </van-form>

      <div
        class="newList"
        @click="cardClick"
        v-if="state.fromData.workType === '巡查工单'"
      >
        <div class="title">处置事项:</div>
        <div class="list" v-for="(item, index) in state.matterList" :key="index">
          <div class="left">
            {{ item.label }}
          </div>

          <van-switch
            active-color="#00b01b"
            v-model="item.value"
            :active-value="'1'"
            :inactive-value="'0'"
            class="switch"
          />
          <!-- <div
            class="state"
            :style="{
              color: item.value ? '#fff' : '#333',
            }"
          >
            {{ item.value == "1" ? "已完成" : "未完成" }}
          </div> -->
          <div class="placeholder">点击确认事项</div>
        </div>
      </div>
    </div>

    <div class="detail-foot">
      <van-button style="flex: 1" type="success" @click="submitClick">
        创建工单
      </van-button>
    </div>
  </div>
</template>

<script setup>
import { reactive, onMounted } from "vue";
import {
  getBzOptions,
  createWorkApi,
  getPlanManageByCountyCode1,
  getRePlanManageByPointId,
  getClassInfoById,
} from "@/api/eventTask";
import { useRouter, useRoute } from "vue-router";
import { showSuccessToast, showFailToast } from "vant";
const router = useRouter();
const route = useRoute();
//返回
const onClickLeft = () => history.back();

const state = reactive({
  fromData: {},
  // 工单类型弹窗显示
  showPicker1: false,
  // 班组长弹窗显示
  showPicker2: false,
  // 风险点位弹窗
  showPicker3: false,
  leaderColumns: [],
  // 巡查事项
  matterList: [
    {
      label: "协调（城管部门/属地镇街）对积水风险隐患点汇水范围内道路开展市政清扫。",
      value: "0",
      key: "1",
    },
    {
      label: "开展雨水箅、雨水口和连接管疏通淘挖，开展排水管网、河道等行泄通道清淤疏浚。",
      value: "0",
      key: "2",
    },
    {
      label:
        "对积水风险隐患点对应的智能感知设备（视频监控、水位计、智能水篦子）进行检查。",
      value: "0",
      key: "3",
    },
    { label: "对拍门等防倒灌设备开展启闭检查。", value: "0", key: "4" },
    { label: "对雨水泵站开展启闭检查。", value: "0", key: "5" },
    {
      label:
        "对积水风险隐患点汇水范围内排水设施（雨水篦、窨井盖、排水口等）和海绵设施进行巡查检查。",
      value: "0",
      key: "6",
    },
    {
      label: "对积水风险隐患点汇水范围内施工工地开展巡查和管控。",
      value: "0",
      key: "7",
    },
    {
      label: "提前开启雨水篦、窨井盖，并安装防护围栏确保安全。",
      value: "0",
      key: "8",
    },
    {
      label: "明确抽排路径。",
      value: "0",
      key: "9",
    },
    {
      label: "使用沙袋和挡水板构建临时引流通道。",
      value: "0",
      key: "10",
    },
    {
      label: "（协调水利部门）开展河湖、水库、调蓄池等调蓄设施预降水位、腾出库容。",
      value: "0",
      key: "11",
    },
  ],
  riskPointColumns: [],
  type: "",
});

// 工单类型下拉
const workTypeColumns = [
  { text: "巡查工单", value: "巡查工单" },
  { text: "值守工单", value: "值守工单" },
];
// 工单类型下拉选择
const onConfirmWorkType = ({ selectedValues, selectedOptions }) => {
  state.fromData.workTypeName = selectedOptions[0]?.text;
  state.fromData.workType = selectedOptions[0]?.value;
  //   pickerValue.value = selectedValues;
  state.showPicker1 = false;
};

// 班组长下拉选择
const onConfirmLeader = ({ selectedValues, selectedOptions }) => {
  state.fromData.teamLeaderId = selectedOptions[0]?.value;
  state.fromData.teamLeader = selectedOptions[0]?.text;
  state.fromData.reTeamId = selectedOptions[0]?.id;
  state.fromData.reTeamName = selectedOptions[0]?.name;
  //   pickerValue.value = selectedValues;
  state.showPicker2 = false;
};
// 选择风险点位
const onConfirmRiskPoint = ({ selectedValues, selectedOptions }) => {
  state.fromData.riskPointId = selectedOptions[0]?.value;
  state.fromData.riskPoint = selectedOptions[0]?.text;
  state.fromData.workOrderAddress = selectedOptions[0]?.text;
  //   pickerValue.value = selectedValues;
  getPlan(state.fromData.riskPointId);
  state.showPicker3 = false;
};
// 获取预案
const getPlan = (id) => {
  getRePlanManageByPointId(id).then(async ({ data }) => {
    if (data && data.code == 200) {
      // state.fromData.reTeamName = data.data.rePlanDetails[0]?.teamName;
      // state.fromData.reTeamId = data.data.rePlanDetails[0]?.teamId;
      let disposalMatter = data.data?.rePlanDetailsConfiguration?.disposalMatter?.split(
        ","
      );
      disposalMatter?.forEach((item) => {
        state.matterList.forEach((item1) => {
          if (item1.key === item) {
            item1.value = "1";
          }
        });
      });
      const { data: rData } = await getClassInfoById({
        id: data.data.rePlanDetails[0]?.teamId,
      });
      if (rData && rData.code == 200) {
        state.fromData.teamLeaderId = rData.data.userId;
        state.fromData.teamLeader = rData.data.userName;
        state.fromData.reTeamId = rData.data.id;
        state.fromData.reTeamName = rData.data.name;
      }
    }
  });
};

onMounted(() => {
  state.fromData.taskId = route.query.taskId;
  state.type = route.query.type;
  if (state.type == "点位响应") {
    getPlan(route.query.riskPointId);
    state.fromData.workOrderAddress = route.query.riskPointName;
    state.fromData.riskPointId = route.query.riskPointId;
    state.fromData.riskPoint = route.query.riskPointName;
    state.fromData.workOrderDescription = route.query.warningContent;
  } else {
    // 获取风险点位
    getPlanManageByCountyCode1({
      countyCode: route.query.code,
      pointState: 1,
    }).then(({ data }) => {
      if (data && data.status == 200) {
        state.riskPointColumns = data.data.map((item) => {
          return {
            text: item.name,
            value: item.id,
          };
        });
      }
    });
  }
  // 获取班组长
  getBzOptions({ code: route.query.code }).then(({ data }) => {
    if (data && data.code == 200) {
    }
    state.leaderColumns = data.data.map((item) => {
      return {
        ...item,
        text: item.userName,
        value: item.userId,
      };
    });
  });
});
// 创建工单
const submitClick = () => {
  if (state.fromData.workType == "巡查工单") {
    let matterKeys = [];
    state.matterList.forEach((item) => {
      if (item.value === "1") {
        matterKeys.push(item.key);
      }
    });
    state.fromData.inspectionMatters = matterKeys.join(",");
  } else {
    delete state.fromData.inspectionMatters;
  }
  state.fromData.warningType = "预警响应工单"; // 响应类型
  createWorkApi(state.fromData)
    .then(({ data }) => {
      if (data.status == 200) {
        showSuccessToast("提交成功");
        history.back();
      } else {
        showFailToast("创建工单失败");
      }
    })
    .catch((err) => {});
};
</script>

<style lang="less" scoped>
.real-container {
  height: 100vh;
  background: rgba(243, 243, 243, 1);
  .header {
    // height: 100px;
    background: #ffffff;
    text-align: center;
    // padding-top: 34px;
    .title {
      font-family: PingFang TC, PingFang TC;
      font-weight: 600;
      font-size: 18px;
      color: rgba(0, 0, 0, 0.9);
      // margin-bottom: 20px;
      // border: 1px red solid;
    }
  }

  .form-list {
    height: calc(100vh - 160px);
    // height: 100%;
    // margin: 10px 0;
    overflow-y: auto;
    background: #fff;
    padding-top: 10px;
    margin-top: 10px;
  }
  .detail-foot {
    width: 100vw;
    padding: 20px;
    background: #fff;
    position: fixed;
    bottom: 0px;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
  }
}

.newList {
  background: #fff;
  padding-bottom: 1px;
  // margin-top: 10px;
  margin-bottom: 10px;
  padding: 10px;
  --van-switch-width: calc(100vw - 50px);
  .title {
    font-size: 14px;
    margin-left: 22px;
    margin-bottom: 10px;
  }
  .list {
    width: 100%;
    background-color: rgba(242, 242, 242, 1);
    margin-bottom: 5px;
    padding: 8px 10px;
    box-sizing: border-box;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    position: relative;
    &:last-child {
      margin-bottom: 0;
    }
    .left {
      color: #333;
    }
    .switch {
      margin-top: 10px;
      position: relative;
    }

    .state {
      position: absolute;
      left: 50px;
      bottom: 18px;

      color: #333;
    }

    .placeholder {
      position: absolute;
      left: 40%;
      bottom: 18px;
      color: #c5c5c5;
    }
  }
}
</style>
